import React, { useEffect, useState } from 'react'
import { NavBar, List, SearchBar, Toast } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import axios from 'axios'
import { Card, Tag, IndexBar } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { dj } from '../../store/City'
import styles from './detail.module.css'
function Index() {
    const navigate = useNavigate()
    const { type } = useParams()
    const dispatch = useDispatch()
    const [qunb, setqunb] = useState([])
    const [rem, setrem] = useState([])
    const xuanRan = async () => {
        const res = await axios.get('/api/city')
        console.log(res)
        const { code, data } = res.data
        if (code === 200) {
            setqunb(data.city)
            setrem(data.hotCities)
        }
    }
    useEffect(() => {
        xuanRan()
    }, [])
    const tz = (city) => {
        dispatch(dj({ type, city }))
        navigate('/')
    }
    const [ss, setSS] = useState([])
    const sous = async (wd) => {
        if (wd === '') {
            Toast.show('请输入内容')
            setSS([])
        }
        else {
            const res = await axios.get('/api/city/search', { params: wd })
            console.log(res)
             const {code,data,message}=res.data
            
        }
    }
    return (
        <div>
            <NavBar onBack={() => navigate('/')}

            >
                <SearchBar placeholder='请输入内容'
                 onChange={(wd)=>sous(wd)}
                />
                <div className={styles.hs}>
                    {
                        ss.map((item, index) => {
                            return <List key={index}>
                                <List.Item >{ item.name}</List.Item>
                            </List>
                        })
                    }
                </div>

            </NavBar>
            <Card title='当前城市:北京' >

            </Card>
            <Card title='热门城市' >
                {
                    rem.length > 0 && rem.map((item, index) => {
                        return <Tag key={index}>{item.name}</Tag>
                    })
                }

            </Card>
            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {qunb.length > 0 && qunb.map(item => {
                        return (
                            <IndexBar.Panel
                                index={item.initial}
                                title={`${item.initial}`}
                                key={`${item.initial}`}
                            >
                                <List>
                                    {item.list.map((item, index) => (
                                        <List.Item key={index} onClick={() => tz(item.name)}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}

export default Index
